@fish-sm: 2vmin;
@fish-md: 3vmin;
@fish-lg: 5vmin;
@import "./reset.css";

* {
    font-family            : miranafont, "Hiragino Sans GB", STXihei, "Microsoft YaHei", SimSun, sans-serif;
    margin                 : 0;
    padding                : 0;
    text-decoration        : none;
    box-sizing             : border-box;
    -webkit-font-smoothing : antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing         : 1px;
}

[v-cloak] {
    display: none;
}

::-webkit-scrollbar {
    width : 5px;
    height: 5px;
}

::-webkit-scrollbar-thumb {
    border-radius   : 10px;
    background-color: #d81e06;
}

::-webkit-scrollbar-track {
    background-color: #ffffff;
}

@keyframes main {
    0% {
        opacity  : 0;
        transform: translateY(50px);
    }

    100% {
        opacity  : 1;
        transform: translateY(0);
    }
}

.site-content {
    margin      : 0 auto;
    padding     : 0 10px;
    // max-width: 800px;
    max-width   : 1024px;
}

.animate {
    animation: main 1.5s;
}

@media (max-width: 800px) {
    .site-content {
        animation: none;
        padding  : 50px 4% 0 4%;
    }
}

/**文章样式**/
.entry-content {

    /* BLOCKS
  =============================================================================*/

    p,
    blockquote,
    ul,
    ol,
    dl,
    table,
    pre {
        margin: 15px 0;
    }

    /* HEADERS
  =============================================================================*/
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color      : #4f4f4f;
        margin     : 8px 0 16px;
        font-weight: 700;
        position   : relative;

        &:hover {
            &:before {
                left    : -28px;
                position: absolute;
                content : '「 ';
                color   : #ff6d6d;
            }

            &:after {
                //position: absolute;
                content: ' 」';
                color  : #ff6d6d;
            }
        }

        //&:before{
        //  content: '「 ';
        //  color: #ff6d6d;
        //}
        //&:after{
        //  content: ' 」';
        //  color: #ff6d6d;
        //}
    }

    h1 tt,
    h1 code,
    h2 tt,
    h2 code,
    h3 tt,
    h3 code,
    h4 tt,
    h4 code,
    h5 tt,
    h5 code,
    h6 tt,
    h6 code {
        font-size: inherit;
    }

    h1 {
        font-size  : 28px;
        line-height: 36px;
    }

    h2 {
        font-size  : 24px;
        line-height: 32px;
    }

    h3 {
        font-size  : 22px;
        line-height: 30px;
    }

    h4 {
        font-size  : 20px;
        line-height: 28px;
    }

    h5 {
        font-size  : 18px;
        line-height: 26px;
    }

    h6 {
        font-size  : 16px;
        line-height: 24px;
    }

    /* LINKS
  =============================================================================*/

    a {
        color          : #6795b5;
        text-decoration: none;
    }

    a:active,
    a:hover {
        outline: 0;
    }

    a:hover,
    a:focus {
        color          : #cb4b16;
        text-decoration: none;
    }

    /* LISTS
  =============================================================================*/
    ul,
    ol {
        padding-left: 30px;

        li {
            list-style-type: disc;
            margin         : 8px 0 0 32px;
        }
    }


    ul ul,
    ul ol,
    ol ol,
    ol ul {
        margin-bottom: 0;
    }

    dl {
        padding: 0;
    }

    dl dt {
        font-size  : 14px;
        font-weight: bold;
        font-style : italic;
        padding    : 0;
        margin     : 15px 0 5px;
    }

    dl dt:first-child {
        padding: 0;
    }

    dl dt>:first-child {
        margin-top: 0;
    }

    dl dt>:last-child {
        margin-bottom: 0;
    }

    dl dd {
        margin : 0 0 15px;
        padding: 0 15px;
    }

    dl dd>:first-child {
        margin-top: 0;
    }

    dl dd>:last-child {
        margin-bottom: 0;
    }

    /* CODE
  =============================================================================*/

    pre,
    code,
    tt {
        font-size  : 15px;
        font-family: Consolas, "Liberation Mono", Courier, monospace;
    }

    code,
    tt {
        margin          : 0 5px;
        padding         : 2px;
        white-space     : nowrap;
        color           : #c7254e;
        background-color: #f9f2f4;
        border          : 1px solid #eaeaea;
        border-radius   : 3px;
    }

    pre>code {
        margin     : 0;
        padding    : 0;
        white-space: pre;
        color      : #333;
        border     : none;
        background : transparent;
    }

    pre {
        background-color: #f8f8f8;
        border          : 1px solid #F9F9F9;
        line-height     : 1.5rem;
        overflow        : auto;
        padding         : 6px 10px;
        border-radius   : 3px;
    }

    pre code,
    pre tt {
        background-color: transparent;
        border          : none;
    }

    /* QUOTES
  =============================================================================*/

    blockquote {
        border-left     : 4px solid #A0DAD0;
        background-color: #ebeef5;
        border-radius   : 3px;
        padding         : 15px 20px;
        margin          : 15px 0;
        color           : #777;
    }

    blockquote>:first-child {
        margin-top: 0;
    }

    blockquote>:last-child {
        margin-bottom: 0;
    }

    /* HORIZONTAL RULES
  =============================================================================*/

    hr {
        margin       : 24px 0;
        border       : none;
        border-bottom: 1px solid #ddd;
        clear        : both;
    }

    /* TABLES
  =============================================================================*/
    table {
        margin: 0 auto;
    }

    table th {
        font-weight: bold;
    }

    table th,
    table td {
        border : 1px solid #ccc;
        padding: 6px 13px;
    }

    table tr {
        border-top      : 1px solid #ccc;
        background-color: #fff;
    }

    table tr:nth-child(2n) {
        background-color: #f8f8f8;
    }

    /* IMAGES
  =============================================================================*/

    img {
        max-width: 100%
    }

    /* P
  =============================================================================*/
    p {
        font-size  : 16px;
        color      : #4d4d4d;
        font-weight: 400;
        line-height: 26px;
    }

    /**
  =============================================================================*/
    @media (max-width: 800px) {

        ul,
        ol {
            padding-left: 10px;
            margin      : 0;

            li {
                list-style: inside;
                margin    : 0;
            }
        }
    }
}